<template>
  <div>
    <van-search
      v-model="value"
      placeholder="请输入您搜索的内容"
      background="#ff690c"
      shape="round"
      @cancel="onCancel"
      @search="onSearch"
      show-action
    />
    <van-dropdown-menu>
      <van-dropdown-item v-model="value1" :options="option1" />
      <van-dropdown-item v-model="value2" :options="option2" />
    </van-dropdown-menu>
    <div class="classify">
      <ProductList
        :classify="value1"
        :sort_="value2"
        :keyword="keyword"
      ></ProductList>
    </div>
  </div>
</template>

<script>
import ProductList from "@/components/ProductList.vue";

export default {
  components: {
    ProductList,
  },
  data() {
    return {
      keyword: "",
      value: "",
      value1: 0,
      value2: "a",
      option1: [
        { text: "所有美食", value: 0 },
        { text: "招牌主食", value: 1 },
        { text: "热门糕点", value: 2 },
        { text: "人气菜肴", value: 3 },
      ],
      option2: [
        { text: "默认排序", value: "a" },
        { text: "价格升序", value: "b" },
        { text: "价格降序", value: "c" },
        { text: "销量排序", value: "d" },
      ],
    };
  },
  methods: {
    onCancel() {
      this.$router.go(-1);
    },
    onSearch(val) {
      this.keyword = val;
    },
  },
  mounted() {
    if (this.$route.query.value1) {
      this.value1 = this.$route.query.value1 - 0;
    }
  },
};
</script>

<style lang='scss' scoped>
@import "@/static/common/base.scss";
</style>